<template>
  <div>
    <div class="page has-navbar" v-nav="{title: '车辆检测', showBackButton: true}">
      <div class="page-content padding-top">
        <scroller class="page-content  cars-box" :on-refresh="onRefresh" :on-infinite="onInfinite" ref="scroller">
          <car-search :params="res.params" @searchOptions="searchOptions" ></car-search>  
          <car-optionstow :carsList="res.carsList" ></car-optionstow>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
  import carOptionstow from 'src/assembly/carOptionsTow.vue'
  import carSearch from 'src/assembly/searchModel.vue'
  export default {
    data () {
      return {
        res: {
          carsList: [],
          params: {
            marketId: sess.get('userSession').marketId,
            pageIndex: 0,
            pageSize: 10,
            carVin6: ''
          }
        },
        sessPosition: {},
        sessTop: '',
        sessIndex: '',
      }
    },
    components: {
      carOptionstow,
      carSearch
    },
    methods: {
      onRefresh () {
        this.res.params.pageIndex = 1
        this.res.params.pageSize = 10
        this.getData(false)
      },
      onInfinite () {
        if (this.sessPosition.scrollerTop || this.sessPosition.carVin6) {
          this.res.params.pageIndex = 1
          this.res.params.carVin6 = this.sessPosition.carVin6
          this.res.params.pageSize = this.sessPosition.pageIndex * 10
          this.sessTop = this.sessPosition.scrollerTop
          this.sessIndex = this.sessPosition.pageIndex
          this.sessPosition = {}
        } else {
          this.res.params.pageIndex += 1
          this.res.params.pageSize = 10
          this.res.params.carVin6 = ''
        }
        this.getData(true)
      },
      getData (boole) {
        window.axios.get(baseUrl + '/controller/car/getCarFirstDetectList', {params: this.res.params}).then(res => {
          if (boole) {
            if (this.sessTop) {
              this.res.params.pageIndex = this.sessIndex
              this.res.carsList = res.data.result
            } else {
              this.res.carsList = this.res.carsList.concat(res.data.result)
            }
          } else {
            this.res.carsList = res.data.result
          }
          this.$nextTick().then(() => {
            this.$refs.scroller.finishPullToRefresh()
            if (this.sessTop) {
              setTimeout(() => {
                this.$refs['scroller'].scrollBy(0, this.sessTop, false)
                this.sessTop = ''
                this.sessIndex = ''
              },20)
            }
            if (res.data.result.length < 10){
              this.$refs.scroller.finishInfinite(true)
              return false
            }
            this.$refs.scroller.finishInfinite()
          })
        })
      },
      searchOptions (arr) {
        this.res.params.carVin6 = arr[0] ? arr[1] : ''
        this.onRefresh()
      }
    },
    created () {
      
      console.log()
      if (sess.get('carTestingObj')) {
        this.sessPosition = sess.get('carTestingObj').carPosition || {}
      }
    },
    beforeDestroy(){
			let obj = {
				pageIndex: this.res.params.pageIndex,
        scrollerTop: this.$refs['scroller'].getPosition().top,
        carVin6: this.res.params.carVin6
			}
			sess.set('carTestingObj', {
				carPosition: obj
			})
		}
  }
</script>

